<template>
  <div class="industry-overview-wrapper">
    <div class="left">
      <div class="title">产业信息</div>
      <div class="left-top">
        <div class="left-top-tabs">
          <div class="left-top-tabs-items">
            <tabItem2
              v-for="(item, index) of leftTopConfig1"
              :key="index"
              :config="item"
              :value="leftData[item.value]"
            />
          </div>
          <div class="left-top-tabs-items">
            <tabItem
              v-for="(item, index) of leftTopConfig2"
              :key="index"
              :config="item"
              :value="leftData[item.value]"
            />
          </div>
        </div>
        <div class="left-top-chart">
          <echartDiv :options="optionLeftTop" />
        </div>
      </div>
      <div class="left-bottom">
        <div class="left-bottom-tabs">
          <tabItem3
            v-for="(item, index) of leftBottomConfig"
            :key="index"
            :config="item"
            :value="leftData[item.value]"
          />
        </div>
        <div class="left-bottom-chart">
          <echartDiv :options="optionLeftBottom" />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">区重点项目</div>
      <div class="right-tabs">
        <tabItem2
          v-for="(item, index) of rightConfig1"
          :key="index"
          :config="item"
          :value="rightData[item.value]"
        />
      </div>
      <div class="right-items">
        <tabItem1
          v-for="(item, index) of rightConfig2"
          :key="index"
          :config="item"
          :detail="rightData"
        />
      </div>
      <div class="right-chart">
        <echartDiv :options="optionRight1" />
      </div>
      <div
        class="right-time"
        @click="handleSelectRightTime"
      >
        {{ optionRightYear }}年
        <i class="el-icon-arrow-down"></i>
        <el-date-picker
          v-model="optionRightYear"
          type="year"
          ref="tiemPick"
          value-format="yyyy"
          class="right-time-pick"
          @change="getStatisticsQZDXM"
        />
      </div>
      <div class="right-table">
        <table class="table">
          <thead>
            <tr>
              <th style="width: 25%"></th>
              <th style="width: 25%">总项目</th>
              <th style="width: 25%">政府投资项目</th>
              <th style="width: 25%">企业投资项目</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>项目数(个)</td>
              <td>{{ rightData.ndProjectCount }}</td>
              <td>{{ rightData.ndzfProjectCount }}</td>
              <td>{{ rightData.ndqyProjectCount }}</td>
            </tr>
            <tr>
              <td>总投资额(亿元)</td>
              <td>{{ rightData.ndProjectAmount }}</td>
              <td>{{ rightData.ndzfProjectAmount }}</td>
              <td>{{ rightData.ndqyProjectAmount }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="right-chart">
        <echartDiv :options="optionRight2" />
      </div>
    </div>
  </div>
</template>
<script>
import echartDiv from '@/components/echart/index'
import tabItem from './tabItem.vue'
import tabItem1 from './tabItem1.vue'
import tabItem2 from './tabItem2.vue'
import tabItem3 from './tabItem3.vue'
import {
  queryIndustry,
  queryZone
} from '@/api/WisdomIndustryOverview'
import dayjs from 'dayjs'
export default {
  components: {
    echartDiv,
    tabItem,
    tabItem1,
    tabItem2,
    tabItem3
  },
  data() {
    return {
      // 企业信息
      leftTopConfig1: [
        {
          label: '项目总数',
          value: 'projectCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-top-icon1.png'),
          bg: 'linear-gradient(165deg, #4FB1F3, #1D82C6)'
        },
        {
          label: '项目总投资',
          value: 'projectAmountTotal',
          unit: '亿元',
          icon: require('@/assets/img/overview/zhcy-top-icon2.png'),
          bg: 'linear-gradient(165deg, #029FDA, #017DAB)'
        }
      ],
      leftTopConfig2: [
        {
          label: '已签约项目',
          value: 'signCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-mid-icon1.png'),
          bg: ''
        },
        {
          label: '已签约项目总投资',
          value: 'signAmountTotal',
          unit: '亿元',
          icon: require('@/assets/img/overview/zhcy-mid-icon2.png'),
          bg: ''
        },
        {
          label: '重点在谈项目',
          value: 'importantCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-mid-icon3.png'),
          bg: ''
        },
        {
          label: '重点在谈项目总投资',
          value: 'importantAmountTotal',
          unit: '亿元',
          icon: require('@/assets/img/overview/zhcy-mid-icon4.png'),
          bg: ''
        }
      ],
      optionLeftTop: null,
      leftBottomConfig: [
        {
          label: '注册企业',
          value: 'registerCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-bottom-icon1.png'),
          bg: 'linear-gradient(180deg, #5AB9F8, #419EDC)'
        },
        {
          label: '租赁场地企业',
          value: 'rentCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-bottom-icon2.png'),
          bg: 'linear-gradient(180deg, #4FD7D9, #00A49E)'
        },
        {
          label: '自建场地企业',
          value: 'buildCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-bottom-icon3.png'),
          bg: 'linear-gradient(180deg, #E2A272, #BC7E60)'
        }
      ],
      optionLeftBottom: null,
      leftData: {
        projectCount: 0,
        projectAmountTotal: 0,
        signCount: 0,
        signAmountTotal: 0,
        importantCount: 0,
        importantAmountTotal: 0,
        registerCount: 0,
        rentCount: 0,
        buildCount: 0
      },

      // 区重点项目
      rightConfig1: [
        {
          label: '项目总数',
          value: 'projectCount',
          unit: '个',
          icon: require('@/assets/img/overview/zhcy-top-icon3.png'),
          bg: 'linear-gradient(165deg, #22CED6, #01989F)'
        },
        {
          label: '项目总投资额',
          value: 'projectAmount',
          unit: '亿元',
          icon: require('@/assets/img/overview/zhcy-top-icon4.png'),
          bg: 'linear-gradient(165deg, #01A8B0, #01848A)'
        }
      ],
      rightConfig2: [
        {
          name: '政府投资',
          bg: 'linear-gradient(165deg, #F8BD70, #E2A85B)',
          detail: [
            {
              label: '项目数',
              value: 'zfProjectCount',
              unit: '个'
            },
            {
              label: '投资总额',
              value: 'zfProjectAmount',
              unit: '亿元'
            }
          ]
        },
        {
          name: '企业投资',
          bg: 'linear-gradient(165deg, #58A2EF, #4782C2)',
          detail: [
            {
              label: '项目数',
              value: 'qyProjectCount',
              unit: '个'
            },
            {
              label: '投资总额',
              value: 'qyProjectAmount',
              unit: '亿元'
            }
          ]
        }
      ],
      optionRightYear: dayjs(new Date()).format('YYYY'),
      optionRight1: null,
      optionRight2: null,
      rightData: {
        projectCount: 0,
        projectAmount: 0,
        zfProjectCount: 0,
        zfProjectAmount: 0,
        qyProjectCount: 0,
        qyProjectAmount: 0,
        ndProjectCount: 0,
        ndProjectAmount: 0,
        ndzfProjectCount: 0,
        ndzfProjectAmount: 0,
        ndqyProjectCount: 0,
        ndqyProjectAmount: 0
      }
    }
  },
  mounted() {
    this.getStatisticsCYXX()
    this.getStatisticsQZDXM()
  },
  methods: {
    getStatisticsCYXX() {
      queryIndustry().then((res) => {
        if (res.success) {
          // 顶部
          this.leftData = {
            projectCount: res.data.projectCount || 0,
            projectAmountTotal:
              res.data.projectAmountTotal || 0,
            signCount: res.data.signCount || 0,
            signAmountTotal: res.data.signAmountTotal || 0,
            importantCount: res.data.importantCount || 0,
            importantAmountTotal:
              res.data.importantAmountTotal || 0,
            registerCount: res.data.registerCount || 0,
            rentCount: res.data.rentCount || 0,
            buildCount: res.data.buildCount || 0
          }
          // 产业类型
          this.optionLeftTop = this.getChartDataPie(
            res.data.typeList
          )
          // 企业
          this.optionLeftBottom = this.getChartDataBar(
            res.data.companyTotalVoList
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSelectRightTime() {
      if (this.$refs.tiemPick) {
        this.$refs.tiemPick.focus()
      }
    },
    getStatisticsQZDXM() {
      queryZone({ year: this.optionRightYear }).then(
        (res) => {
          if (res.success) {
            // 顶部
            this.rightData = {
              projectCount:
                res.data.allTotal.projectCount || 0,
              projectAmount: (
                (res.data.allTotal.projectAmount || 0) /
                10000
              ).toFixed(2),
              zfProjectCount:
                res.data.governTotal.projectCount || 0,
              zfProjectAmount: (
                (res.data.governTotal.projectAmount || 0) /
                10000
              ).toFixed(2),
              qyProjectCount:
                res.data.unGovernTotal.projectCount || 0,
              qyProjectAmount: (
                (res.data.unGovernTotal.projectAmount ||
                  0) / 10000
              ).toFixed(2),

              ndProjectCount:
                res.data.allYearTotal.projectCount || 0,
              ndProjectAmount: (
                (res.data.allYearTotal.projectAmount || 0) /
                10000
              ).toFixed(2),
              ndzfProjectCount:
                res.data.governYearTotal.projectCount || 0,
              ndzfProjectAmount: (
                (res.data.governYearTotal.projectAmount ||
                  0) / 10000
              ).toFixed(2),
              ndqyProjectCount:
                res.data.unGovernYearTotal.projectCount ||
                0,
              ndqyProjectAmount: (
                (res.data.unGovernYearTotal.projectAmount ||
                  0) / 10000
              ).toFixed(2)
            }
            // 产业类型
            this.optionRight1 = this.getChartDataPie1(
              res.data.projectTypeTotal,
              '项目类型'
            )
            // 企业
            this.optionRight2 = this.getChartDataPie1(
              res.data.projectTypeYearTotal,
              '项目类型'
            )
          } else {
            this.$message.error(res.message)
          }
        }
      )
    },
    getChartDataPie(data) {
      let option = {
        color: [
          '#22CED6',
          '#FB8585',
          '#698FEF',
          '#0196CE',
          '#52B5F6',
          '#1A79B7'
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: true,
          left: 'center',
          bottom: '0',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          formatter: (name) => {
            if (data.length) {
              const item = data.filter(
                (item) => item.type === name
              )[0]
              return `{name|${name} } {value| ${
                item.count || 0
              }} {unit| 个} {value1| ${
                item.amount || 0
              }} {unit| 亿元}`
            }
          },
          textStyle: {
            verticalAlign: 'middle',
            rich: {
              name: {
                color: '#4c565c',
                fontSize: 14,
                lineHeight: 18,
                padding: [0, 0, 0, 5],
                width: 100
              },
              value: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 500,
                lineHeight: 18
              },
              value1: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 500,
                lineHeight: 18
              },
              unit: {
                color: '#4C565C',
                fontSize: 14,
                lineHeight: 18
              }
            }
          }
        },
        tooltip: {
          show: true,
          formatter: '{b}: {d}%'
        },
        series: [
          {
            type: 'pie',
            radius: ['42%', '50%'],
            center: ['50%', '25%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['34%', '42%'],
            center: ['50%', '25%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.count,
          name: item.type
        })
        seriesData2.push({
          value: item.count,
          name: item.type,
          itemStyle: {
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    getChartDataPie1(data, title) {
      let total = 0
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.projectCount,
          name: item.projectType
        })
        seriesData2.push({
          value: item.projectCount,
          name: item.projectType,
          itemStyle: {
            opacity: 0.4
          }
        })
        total += item.projectCount
      }

      const option = {
        color: [
          '#0190C6',
          '#FFD08E',
          '#83B4D4',
          '#38CC93',
          '#699AFA',
          '#699AFA'
        ],
        title: {
          text: title,
          top: 'center',
          left: '25%',
          textStyle: {
            color: '#000000',
            fontSize: 14,
            fontWeight: 400
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: true,
          right: '30',
          top: 'center',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 5,
          // icon: 'circle',
          formatter: (name) => {
            if (data.length) {
              const item = data.filter(
                (item) => item.projectType === name
              )[0]
              let percent = 0
              if (item.projectCount !== 0 && total !== 0) {
                percent = (
                  (item.projectCount / total) *
                  100
                ).toFixed(2)
              }
              return `{name|${name} } {value| ${item.projectCount}} {unit| 个} {percent| ${percent}%}`
            }
          },
          textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
              name: {
                color: '#4c565c',
                fontSize: 14,
                padding: [0, 0, 0, 5],
                width: 130
              },
              value: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 500
              },
              unit: {
                color: '#4C565C',
                fontSize: 14
              },
              percent: {
                color: '#000000',
                fontSize: 14
              }
            }
          }
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['30%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              show: false,
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              labelLine: {
                show: true
              }
            }
          },
          {
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['30%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    getChartDataBar(data) {
      let option = {
        grid: {
          top: 60,
          bottom: 20,
          left: 50,
          right: 0
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          left: 'center',
          top: '0',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 24,
          textStyle: {
            color: '#4C565C',
            fontSize: 14
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#497FA333'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: '单位（个）',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#A7ADB5',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#497FA333'
              }
            },
            nameTextStyle: {
              color: '#A7ADB5',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '注册企业',
            type: 'bar',
            data: [],
            barWidth: '10',
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#419EDC'
                },
                {
                  offset: 1,
                  color: '#5AB9F8'
                }
              ]
            )
          },
          {
            name: '租赁场地企业',
            type: 'bar',
            barWidth: '10',
            data: [],
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#00A49E'
                },
                {
                  offset: 1,
                  color: '#4FD7D9'
                }
              ]
            )
          },
          {
            name: '自建场地企业',
            type: 'bar',
            barWidth: '10',
            data: [],
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#BC7E60'
                },
                {
                  offset: 1,
                  color: '#E2A272'
                }
              ]
            )
          }
        ]
      }
      const xAxisData = []
      const seriesData1 = []
      const seriesData2 = []
      const seriesData3 = []
      for (let key in data) {
        let zcqy = 0
        let zpcdqy = 0
        let zjcdqy = 0
        data[key].forEach((item) => {
          if (item.childType === '注册企业') {
            zcqy = item.count
          } else if (item.childType === '租赁场地企业') {
            zpcdqy = item.count
          } else {
            zjcdqy = item.count
          }
        })
        xAxisData.push(key)
        seriesData1.push(zcqy)
        seriesData2.push(zpcdqy)
        seriesData3.push(zjcdqy)
      }
      option.xAxis[0].data = xAxisData
      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      option.series[2].data = seriesData3
      return option
    }
  }
}
</script>
<style lang="scss" scoped>
.industry-overview-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 18px 16px 24px 16px;
  .title {
    width: 100%;
    height: 50px;
    color: #4c565c;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    padding: 0 0 0 35px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      position: absolute;
      top: calc(50% - 8px);
      left: 24px;
    }
  }
  .left {
    width: calc(60% - 8px);
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    &-top {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: 1px solid #f1f1f1;
      padding: 30px 28px;
      &-tabs {
        width: 62%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        &-items {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: space-between;
          .cy-tabItem2 {
            width: calc(50% - 15px);
            max-height: 118px;
            box-sizing: border-box;
            margin: 0 5px;
          }
          .cy-tabItem {
            width: calc(50% - 5px);
            max-height: 128px;
          }
        }
      }
      &-chart {
        height: 100%;
        width: 38%;
      }
    }
    &-bottom {
      width: 100%;
      height: calc(50% - 50px);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 30px;
      &-tabs {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .cy-tabItem3 {
          width: 100%;
          height: 128px;
        }
      }
      &-chart {
        width: 70%;
        height: 100%;
      }
    }
  }
  .right {
    width: calc(40% - 8px);
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    position: relative;
    &-tabs {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 30px 28px 0 28px;
      .cy-tabItem2 {
        width: calc(50% - 15px);
        max-height: 118px;
        box-sizing: border-box;
        margin: 0 5px;
      }
    }
    &-items {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 10px 28px 0px 28px;
      .cy-tabItem1 {
        width: calc(50% - 5px);
        height: 100px;
      }
    }
    &-time {
      width: 267px;
      height: 89px;
      background: url('~@/assets/img/overview/zhcy-bg.png')
        no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: calc(50% - 116px);
      bottom: calc(50% - 132px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      box-sizing: border-box;
      padding-top: 27px;
      font-size: 18px;
      line-height: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      cursor: pointer;
      &-pick {
        position: absolute;
        z-index: -1;
      }
      i {
        font-size: 14px;
        line-height: 18px;
        margin-left: 5px;
      }
    }
    &-table {
      width: 100%;
      box-sizing: border-box;
      padding: 20px 30px 0px 30px;
      .table {
        width: 100%;
        border-spacing: 0;
        border: 1px solid #f2f6fb;
        thead {
          background-color: #f2f6fb;
          height: 42px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #6b767d;
          text-align: left;
        }
        tbody {
          tr {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #4c565c;
            text-align: left;
            height: 42px;
            &:nth-of-type(even) {
              background-color: #f2f6fb;
            }
            td {
              &:first-child {
                padding-left: 20px;
              }
            }
          }
        }
      }
    }
    &-chart {
      width: 100%;
      height: calc(50% - 227px);
      border-bottom: 1px solid #f1f1f1;
    }
  }
}
</style>
